<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <style>
        .panel{
            background: #98bf21;
            height: 100px;
            width: 100px;
            position: absolute;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                const div = $("div");
                    div.animate({opacity:"0.2", height:"500px",},"slow")
                    div.animate({opacity:"0.6", width:"500px",},"slow")
                    div.animate({opacity:"0.2", height:"200px",},"slow")
                    div.animate({opacity:"0.6", width:"200px",},"slow")
            })
        })
    </script>
</head>
<body>
<button>开始动画</button>
<p>单一动画演示</p>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。
    如需对位置进行操作， 记得首先把元素的 CSS position 属性
    设置为 relative、fixed 或 absolute。</p>
<div class="panel"></div>

</body>
</html>